<template>
    <!-- 押品押率 ************************* -->
  <NewCard title="" :isright="true">
    <template slot="right">
      <el-button type="text" class="handleBtn" @click="collClick"
        >操作</el-button
      >
    </template>
    <div class="collateral-box" >
        <h3>
            <p>类型</p>
            <p>名称</p>
            <p>单位</p>
            <p>关系</p>
            <p>最高抵押率(%)</p>
        </h3>
        <ul>
            <li v-for="(item,index) in collateralData" :key="index">
                <p>{{getType(item.type)}}</p>
                <p>{{item.name}}</p>
                <p>{{item.unit || '--'}}</p>
                <p>{{getCalculation(item)}}</p>
                <p>{{item.mortgageRate | sumFilters}}</p>
            </li>
        </ul>

        <SubBtn>
            <template slot="btn">
                <el-button round @click="clickCopy">复制押率</el-button>
                <el-button round @click="clickStick" v-hasPermi="['tool:collateralRate:addlist']">粘贴押率</el-button>
            </template>
        </SubBtn>
    </div>
    <!-- 抽屉  -->
    <el-drawer
        title="编辑"
        size="40%"
        :visible.sync="editDrawer"
        @close="editDrawerClose">
        <!-- 押品押率 ************************* -->
        <div class="qualif-editbox collateral-editbox" v-hasPermi="['tool:collateralRate:edit']">
            <h3>
                <p>删除</p>
                <p>类型</p>
                <p>名称</p>
                <p>单位</p>
                <p>关系</p>
                <p>最高抵押率(%)</p>
            </h3>
            <div class="edit-list" v-for="(item, index) in collateralData" :key="index">
                <i class="el-icon-remove" @click="removeBtn(item)" v-hasPermi="['tool:collateralRate:remove']"></i>
                <el-select v-model="item.type" placeholder="类型" @change="changeType(item)">
                    <!-- 1实物，2信用类型，3金融资产 -->
                    <el-option label="实物资产" value="1"></el-option>
                    <el-option label="信用类型" value="2"></el-option>
                    <el-option label="金融资产" value="3"></el-option>
                    <el-option label="特殊许可" value="4"></el-option>
                </el-select>
                <el-select v-model="item.typeId" placeholder="名称" @change="changeName(item)">
                    <el-option :label="pawn.name" :value="pawn.id" v-for="pawn in item.arr" :key="pawn.id"></el-option>
                </el-select>
                <p>{{item.unit}}</p>
                <el-select v-model="item.calculation" placeholder="关系" @change="changeCalcul(item)">
                    <!-- 1相加/累加，2max/最大，3min/最小 -->
                    <el-option label="累加" value="1"></el-option>
                    <el-option label="最大" value="2"></el-option>
                    <el-option label="最小" value="3"></el-option>
                </el-select>
                <el-input v-model="item.mortgageRate" placeholder="最高抵押率" @blur="blurMort(item)" @input="addInputValue(item)"></el-input>
            </div>
            <!-- 添加图标 -->
            <p class="drawerAdd">
                <svg-icon icon-class="add-icon" @click="addList" v-hasPermi="['tool:collateralRate:add']"/>
            </p>
            <SubBtn v-if="addBtnState">
                <template slot="btn">
                    <el-button round @click="cancelBtn">取消</el-button>
                    <el-button type="primary" round @click="saveBtn">保存</el-button>
                </template>
            </SubBtn>
        </div>
    </el-drawer>
  </NewCard>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import SubBtn from "@/wss/components/subBtn.vue";

import {getCollateralRateListApi,getCollateralTypeListApi,getCollateralRateAddApi,getCollateralRateEditApi,getCollateralRateRemoveApi,addlistCollateralRateApi} from "@/wss/newApi_3-24/tool/collateralRate.js"
import debounce from "lodash/debounce";
export default {
    name:'collateral',
    components:{NewCard,SubBtn},
    props:{
        supplyVarId:{
            type: String,
        },
        copyCollData:{
            type: Array
        }
    },
    data(){
        return{
            collateralData:[],// 押品押率
            pawnList:[],//抵押物列表

            addBtnState: false,// 添加取消的按钮

            editBtnState: false,// 标识是否为保存按钮的状态
            editDrawer: false,//编辑材料的状态
            drawerState:false,//当前 材料抽屉的状态
            temTableList:[],//暂存的数据
        }
    },
    async mounted(){
        await this.getCollateralRateList() // 获取押品押率列表
        await this.getCollateralTypeList() // 获取抵押物列表
        this.getTypeInfo() // 获取类型、名称、单位

        //打开押品押率的抽屉
        this.$bus.$on('openCollat',()=>{
            this.editDrawer = true //显示编辑材料
        })
    },
    watch:{
        async supplyVarId(newValue,oldValue){
            await this.getCollateralRateList() // 获取押品押率列表
            await this.getCollateralTypeList() // 获取抵押物列表
            this.getTypeInfo() // 获取类型、名称、单位
        },
    },
    methods:{
        //打开押品押率的抽屉
        collClick(){
            this.editDrawer = true //显示编辑材料
        },

        // 获取类型、名称、单位
        getTypeInfo(){
            this.collateralData.forEach(async item=>{
                let obj = this.pawnList.find(i=>{
                    return item.typeId == i.id
                })
                item.type = obj.type
                this.$set(item,'name',obj.name)
                this.$set(item,'unit',obj.unit)

                //过滤出抵押物列表
                let arr = await this.getCollTypeList(item.type)
                this.$set(item,'arr',arr)
            })
        },

        //获取类型
        getType(type){
            // 1实物，2信用类型，3金融资产 4特殊许可
            if(type == '1'){
                return '实物资产'
            }else if(type == '2'){
                return '信用类型'
            }else if(type == '3'){
                return '金融资产'
            }else{
                return '特殊许可'
            }
        },

        // 获取关系 
        getCalculation(item){
            // 1相加/累加，2max/最大，3min/最小
            if(item.calculation == '1'){
                return '累加'
            }else if(item.calculation == '2'){
                return '最大'
            }else{
                return '最小'
            }
        },

        // 获取押品押率列表
        async getCollateralRateList(){
            let loan_id = this.supplyVarId
            let result = await getCollateralRateListApi({loan_id})
            if(result.code == 200){
                this.collateralData = result.rows
            }
        },

        // 获取抵押物列表
        async getCollateralTypeList(){
            let result = await getCollateralTypeListApi()
            if(result.code == 200){
                this.pawnList = result.rows
            }
        },
        
        // 修改类型的时候过滤出抵押物列表
        async changeType(item){
            let arr = await this.getCollTypeList(item.type)
            item.arr = arr
            item.typeId = arr[0].id
            item.unit = arr[0].unit

            // 有id的时候发起修改的接口
            if(item.id){
                this.getCollateralRateEdit(item)
            }else{
                // 添加的判断填写完整的话才保存
                if(item.type != '' && item.typeId != '' && item.calculation != '' && item.mortgageRate != ''){
                    await this.getCollateralRateAdd(item)
                    setTimeout(async ()=>{
                        await this.getCollateralRateList()// 重新获取列表
                        this.getTypeInfo() // 获取类型、名称、单位
                    },500)
                }
            }
        },



        // 根据类型获取抵押物列表
        async getCollTypeList(type){
            let result = await getCollateralTypeListApi({type})
            if(result.code == 200){
                return result.rows
            }
        },

        // 修改名称的时候找到名称对应的单位
        async changeName(item){
            let id = item.typeId
            // 根据id过滤抵押物
            let obj = this.pawnList.find(i=>{
                return i.id == id
            })
            item.name = obj.name
            item.unit = obj.unit

            // 有id的时候发起修改的接口
            if(item.id){
                this.getCollateralRateEdit(item)
            }else{
                // 添加的判断填写完整的话才保存
                if(item.type != '' && item.typeId != '' && item.calculation != '' && item.mortgageRate != ''){
                    await this.getCollateralRateAdd(item)
                    setTimeout(async ()=>{
                        await this.getCollateralRateList()// 重新获取列表
                        this.getTypeInfo() // 获取类型、名称、单位
                    },500)
                }
            }
        },

        // 修改关系的时候
        async changeCalcul(item){
            // 有id的时候发起修改的接口
            if(item.id){
                this.getCollateralRateEdit(item)
            }else{
                // 添加的判断填写完整的话才保存
                if(item.type != '' && item.typeId != '' && item.calculation != '' && item.mortgageRate != ''){
                    await this.getCollateralRateAdd(item)
                    setTimeout(async ()=>{
                        await this.getCollateralRateList()// 重新获取列表
                        this.getTypeInfo() // 获取类型、名称、单位
                    },500)
                }
            }
        },

        // 最高抵押率失去焦点的时候
        blurMort(item){
            // 有id的时候发起修改的接口
            if(item.id){

            }
        },

        // 输入完成后添加和编辑
        addInputValue: debounce(async function(item){
            if(!item.id){
                // 添加的判断填写完整的话才保存
                if(item.type != '' && item.typeId != '' && item.calculation != '' && item.mortgageRate != ''){
                    if(!Number(item.mortgageRate)){
                        this.$message.error("请输入数字");
                        return
                    }
                    await this.getCollateralRateAdd(item)
                    setTimeout(async ()=>{
                        await this.getCollateralRateList()// 重新获取列表
                        this.getTypeInfo() // 获取类型、名称、单位
                    },500)
                }
            }else{
                if(!Number(item.mortgageRate)){
                    this.$message.error("请输入数字");
                    return
                }
                // 编辑的 有id的时候发起修改的接口
                this.getCollateralRateEdit(item)
            }
        },500),

        // 添加一条数据
        addList(){
            // 如果之前的一条没点保存不给添加新的一条
            if(this.addBtnState) {
                this.$message({message: '请保存！',type: 'warning'});
                return
            }

            // this.addBtnState = true //显示按钮
            this.collateralData.push({
                loanId: this.supplyVarId, //贷款品种id
                type: '',//押品类型 1实物，2信用类型，3金融资产
                typeId: '',//押品类型id
                mortgageRate: null,//抵押率
                name:'',//名称
                unit:'',//单位
                calculation:'',//关系
            })
        },

        // 点击添加的取消按钮
        cancelBtn(){
            // 删掉最后一条
            this.collateralData.splice(this.collateralData.length-1,1)
            // this.editDrawer = false //关闭抽屉
            this.addBtnState = false //隐藏按钮
        },

        // 点击添加的保存按钮
        async saveBtn(){
            let item = this.collateralData[this.collateralData.length-1]
            // 添加的
            if(item.type == '' || item.typeId=='' || item.calculation=='' || item.mortgageRate == null){
                this.$message.error("请填写完整");
            }else{
                if(isNaN(item.mortgageRate)){
                    this.$message.error("最高抵押率请输入数字");
                }else{
                    await this.getCollateralRateAdd(item)// 添加的接口
                    setTimeout(async ()=>{
                        await this.getCollateralRateList()// 重新获取列表
                        this.getTypeInfo() // 获取类型、名称、单位
                        this.addBtnState = false //隐藏按钮
                    },500)
                }
                
            }
        },
        
        // 添加押品押率的接口
        async getCollateralRateAdd(item){
            let result = getCollateralRateAddApi(item)
            if(result.code == 200){
                this.$message({message: '编辑成功',type: 'success'});
            }
        },

        //编辑押品押率的接口
        async getCollateralRateEdit(item){
            let result = await getCollateralRateEditApi(item)
            if(result.code == 200){
                this.$message({message: '编辑成功',type: 'success'});
            }
        },

        // 点击删除按钮
        async removeBtn(item){
            if(item.id){
                await this.getCollateralRateRemove(item.id)
                await this.getCollateralRateList() // 重新获取押品押率列表
                this.getTypeInfo() // 获取类型、名称、单位
            }else{
                // 获得下标
                let index = this.collateralData.indexOf(item);
                // 根据下标去删数据
                this.collateralData.splice(index,1)
            }
        },

        // 删除押品押率的接口
        async getCollateralRateRemove(id){
            let result = await getCollateralRateRemoveApi(id)
            if(result.code == 200){
                this.$message({message: '删除成功',type: 'success'});
            }
        },

        // 当关闭编辑项目材料的时候
        async editDrawerClose(){
            await this.getCollateralRateList() // 重新获取押品押率列表
            this.getTypeInfo() // 获取类型、名称、单位
        },

        // ----------------------------复制粘贴功能----------------------
        // 点击复制按钮
        clickCopy(){
            this.$bus.$emit('copyCollateralBus',this.collateralData)
        },

        // 点击粘贴按钮
        clickStick: debounce(async function(){
            // 判断没有复制就不能粘贴
            if(this.copyCollData.length<1) {
                this.$message({message: '请复制',type: 'warning'})
                return
            }

            // 把数据覆盖添加进去
            this.collateralData = this.copyCollData
            await this.addlistCollateralRate()
        },500),

        // 添加多个的接口
        async addlistCollateralRate(){
            let data = JSON.parse(JSON.stringify(this.copyCollData))
            data.forEach(item=>{
                item.loanId = this.supplyVarId
            })
            let result = await addlistCollateralRateApi(data)
            if(result.code=200){
                this.$message({message: '编辑成功',type: 'success'})
            }
        },
    },
}
</script>

<style scoped>
ul,h1,h3,h4,p {
  margin: 0;
  padding: 0;
  list-style: none;
}
.handleBtn{
  color: #f87a23;
  font-size: 12px;
}

/* 押品押率 */
.collateral-box{
    margin-bottom: 60px;
}
.collateral-box h3{
    display: flex;
    font-size: 12px;
    font-weight: 600;
    color: #909aaa;
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 15px;
    margin: 0 30px;
    margin-top: 10px;
}
.collateral-box h3>p{
    width: 19%;
}
.collateral-box h3>p:last-child{
    width: 24%;
}
.collateral-box ul>li{
    display: flex;
    font-size: 14px;
    font-weight: 400;
    color: #2E3F5E;
    padding: 15px 30px;
}
.collateral-box ul>li:hover{
    background-color: #F5F7FA;
}
.collateral-box ul>li p{
    width: 19%;
}
.collateral-box ul>li p:last-child{
    text-align: right;
}
/* 押品押率 */
.collateral-editbox h3>p,
.collateral-editbox h3>p:nth-child(2){
    width: 17%;
}
.collateral-editbox h3>p:first-child{
    width: 10%;
}
.qualif-editbox h3>p:last-child{
    width: 21%;
}

.collateral-editbox .edit-list p{
    line-height: 36px;
    font-size: 14px;
    color: #606266;
}
.collateral-editbox .edit-list .el-select >>> .el-input__inner{
    padding: 0;
}

.collateral-editbox .edit-list .el-select,
.collateral-editbox .edit-list p,
.collateral-editbox .edit-list .el-input:nth-child(2){
    width: 17%;
}
</style>
<style scoped>
/* 编辑项目抽屉样式 */
::v-deep .el-drawer__header{
    border-bottom: 1px solid #EFEFEF;
    padding-bottom: 15px;
    margin-bottom: 20px;
}
::v-deep .el-drawer__header>span{
    font-size: 18px;
    font-weight: bold;
    color: #2E3F5E;
    padding-left: 20px;
    background: url('~@/wss/assets/image/icon/cardLeft.png') left center no-repeat;
    background-size: 7px;
}
/* 抽屉 */
.qualif-editbox{
    padding: 0 20px;
    margin-bottom: 60px;
}
.qualif-editbox h3{
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 600;
  color: #909AAA;
  border-bottom: 1px solid #EBEEF5;
  padding-bottom: 15px;
}
.qualif-editbox h3>p:first-child{
  width: 10%;
}
.qualif-editbox h3>p:nth-child(2){
  width: 90%;
}

.qualif-editbox .edit-list{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #EBEEF5;
}
.qualif-editbox .edit-list i{
    width: 10%;
    color: #909aaa;
    cursor: pointer;
}
.qualif-editbox .edit-list .el-input:nth-child(2){
    width: 92%;
}
::v-deep .edit-list .el-input .el-input__inner{
  border: 0;
  padding: 0;
}

::v-deep .edit-list .el-input .el-input__suffix{
    display: none;
}

.drawerAdd{
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid #f5f7fa;
}
.drawerAdd svg{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #909aaa;
    margin-left: 10%;
    cursor: pointer;
}

/* 押品押率 */
.collateral-editbox h3>p,
.collateral-editbox h3>p:nth-child(2){
    width: 17%;
}
.collateral-editbox h3>p:first-child{
    width: 10%;
}
.qualif-editbox h3>p:last-child{
    width: 21%;
}

.collateral-editbox .edit-list .el-input,
.collateral-editbox .edit-list .el-input:nth-child(2){
    width: 17%;
}


/* 右侧按钮样式 */
::v-deep .subBtn{
  padding: 8px 30px!important;
  z-index: 99;
}
::v-deep .subBtn>.el-button{
  width: 100px;
  padding: 8px 0!important;
  font-size: 14px;
  color: #606E84;
}
.subBtn>.el-button >>> span,
.subBtn>.el-button >>> span>a{
    display: block;
}
::v-deep .subBtn>.el-button.el-button--primary{
  background-color: #F87A23;
  border-color: #F87A23;
  color: #fff;
}
</style>